<template>
  <div class="form_item-text_one">
    <p v-if="is_info" class="text-ellipsis" style="display: block" :title="value">{{ value }}</p>
    <template v-else>
      <el-color-picker v-if="type=='color'" :name="name" v-model="this_value" :size="size" @change="update_value" style="width: 100%;"></el-color-picker>
      <el-slider v-else-if="type=='range'" :name="name" v-model="this_value" :size="size" @change="update_value" style="width: 100%;"></el-slider>
      <el-input v-else :name="name" v-model="this_value" :size="size" @change="update_value" :type="type" :show-password="type=='password'" :placeholder="placeholder" style="width: 100%;">
        <template v-if="computed || upload || append" #append>
          <el-button v-if="computed" @click="add_computed">添加计算值</el-button>
          <template v-else-if="upload">
            <input type="file" style="display: none" ref="input_file" accept="" multiple="multiple" @change="change_file">
            <el-button @click="!uploading && $refs['input_file'].click()">{{uploading?uploading:"上传文件"}}</el-button>
          </template>
          <template v-else-if="append">{{ append }}</template>
        </template>
      </el-input>
      <input v-if="type=='color' || type=='range'" type="hidden"  :name="name" :value="this_value">
    </template>
  </div>
</template>

<script>
import s94Mjs from "s94-js";
import {iframe} from "@/js/tool.js";
import {file_upload} from "@/js/api_tool.js";

export default {
  _title_: '单行文本',
  _can_config_: true,
  _can_form_param_public_: true,
  _can_form_param_: true,
  _can_where_param_: true,
  name: "text_one",
  props: ['name', 'value', 'config', 'is_info', 'size', 'is_list', 'computed','upload', 'placeholder', 'append'],
  emits: ['update:value', 'change'],
  data(){
    return {
      need_display: true,
      this_value: this.value,
      uploading: false,
    }
  },
  methods: {
    update_value(v){
      this.need_display = false;
      setTimeout(()=>{this.need_display = true;},5);
      this.$emit('update:value', v);
      this.$emit('change', v);
    },
    add_computed(){
      let app = this;
      let model_name = /^[a-z]\w*$/.test(this.computed) ? this.computed : "";
      iframe({
        href: '/index/compute_code?model_name='+model_name,
        btns: {
          '确定_primary'(win_app){
            let code = win_app.compute_code;
            if (!code) return app.tips("计算代码不能为空",3);
            app.this_value = s94Mjs.to_string(app.this_value) + '`'+code+'`';
            app.update_value(app.this_value);
            win_app.__iframe.show = false;
          }
        }
      });
    },
    change_file(e){
      let app = this;
      let files = e.target.files;
      let url_arr = [];
      if (app.uploading) return app.tips("上传中，请稍后！", 2);
      app.uploading = "上传中:0/"+files.length;
      s94Mjs.each(files, {
        each(f, i){
          app.uploading = i+"/"+files.length;
          return new Promise((next_file)=>{
            file_upload(f, function (p){
              app.uploading = p.message+":"+Math.floor((i+p.progress)*100)/100+"/"+files.length;
            }).then((file_data)=>{
              url_arr.push(file_data.url.replace(/^\/\//,"http://"));
              next_file();
            }).catch((err_msg)=>{
              app.tips(err_msg, 3);
              next_file();
            })
          })
        },
        over(){
          app.uploading = false;
          e.target.value = "";
          app.this_value = url_arr.join(",");
          app.update_value(app.this_value);
        }
      })
    }
  },
  watch: {
    value(){
      if (!this.need_display) return;
      this.this_value = this.value;
    },
  },
  computed: {
    type(){
      let map = ['password','number','color','range'];
      return ~map.indexOf(this.config) ? this.config : 'text';
    },
  },
  mounted() {

  }
}
</script>

<style>

</style>